<template>
	<view class="zr">
		<view class="water">
			<view class="water-c">
				<view class="water-1"> </view>
				<view class="water-2"> </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	
	/*组件背景颜色*/
	.zr {
		background: #aaaa7f;
		width: 100%;
		height: 350rpx;
		position: relative;
	}

	.water {
		position: absolute;
		left: 0;
		bottom: -10px;
		height: 30px;
		width: 100%;
		z-index: 1
	}

	.water-c {
		position: relative
	}

	.water-1 {
		background: url("") repeat-x;
		background-size: 600rpx;
		-webkit-animation: wave-animation-1 3.5s infinite linear;
		animation: wave-animation-1 3.5s infinite linear
	}

	.water-2 {
		top: 5px;
		background: url("") repeat-x;
		background-size: 600rpx;
		-webkit-animation: wave-animation-2 6s infinite linear;
		animation: wave-animation-2 6s infinite linear
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60rpx
	}

	.back-white {
		background: #fff
	}

	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top
		}

		100% {
			background-position: 600rpx top
		}
	}

	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top
		}

		100% {
			background-position: 600rpx top
		}
	}
</style>
